<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
    
    #canvas{width: 20%;
        margin-left: auto;
        margin-right: auto;}</style>
    <script>
    window.onload = function(argument) {
            draw();
            function draw(argument) {
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                context.fillStyle = "#eef";
                context.fillRect(0, 0, 400, 400);
                var n = 0;
                for (var i = 0; i < 10; i++) {
                    context.beginPath();
                    context.arc(200,  200, i * 20, 0,3.1415926, true);
                    context.closePath();
                    context.fillStyle = 'rgba(255,0,0,0.2)'
                    context.fill();
                };
            };
        }
    </script>
</head>

<body>
    <canvas id="canvas" width="400" height="500"></canvas>

</body>

</html>